<template>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose"
  >
    <div>
      <div class="left" :style="{ height: heightTree }">
        <el-tree
          ref="tree"
          style="margin-left: 10px; margin-top: 5px; margin-bottom: 5px"
          :data="treeData"
          node-key="id"
          :props="defaultProps"
          highlight-current
          @node-click="handleNodeClick"
          :current-node-key="currentNodekey"
          :default-expanded-keys="[treeData[0].children[0]]"
        ></el-tree>
      </div>

      <div class="right">
        <div class="thumbnail" :style="{ height: heightY }">
          <img
            v-for="(image, index) in imageData"
            :src="image.description"
            :key="index"
            :style="{
              width: '140px',
              height: '200px',
              border: index === selectedImageIndex ? '2px solid red' : '',
            }"
            @click="selectImage(index)"
          />
        </div>
        <div class="bigPicture" :style="{ height: heightY }">
          <img
            :src="selectedImageData.description"
            alt=""
            style="width: 100%; height: 100%"
          />
        </div>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>
  
  <script>
import {
  getMaterialTree,
  clickMaterial,
  getImgFromCacheByFlag,
} from "@/api/datacentersg/achives/documentApi";
export default {
  data() {
    return {
      heightY: window.innerHeight - 70 + "px",
      heightTree: window.innerHeight - 70 + "px",
      heightTrees: window.innerHeight - 80 + "px",
      tabPosition: "left",
      images: [],
      treeData: [],
      imageData: [],
      selectedImageIndex: 0,
      selectedImageData: {},
      defaultProps: {
        children: "children",
        label: "name",
      },
      currentNodekey: "", //默认选中的节点树
      name: "",
      idCard: "",
      description: "",
      materialid: "1",
      dialogVisible: false
    };
  },
  mounted() {
    this.getMaterialTree();
  },
  methods: {
    init(row) {
      this.dialogVisible = true;
      this.row = row;
      // let name = this.$route.query.name;
      // let idCard = this.$route.query.idCard;
      this.name = row.xingming;
      this.idCard = row.sfzh;
    },
    // 获取人员档案左侧目录结构树
    getMaterialTree() {
      const params = {
        name: this.name,
        idCard: this.idCard, //身份证号
      };
      getMaterialTree(params).then((result) => {
        if (result.code === 0) {
          this.treeData = result.data.res_data;
          this.handleNodeClick(this.treeData[0].children[0]); // 默认展示第一个目录下的图片
        }
      });
    },
    selectChange() {},
    handleDefaultMenuSelect(index) {
      this.defaultActiveIndex = index; // 改变当前选中的菜单项
    },
    // 点击缩略图
    handleNodeClick(data) {
      if (data.children && data.children.length > 0) {
        // 点击的是父节点，不执行任何操作
        return;
      }
      this.currentNodekey = data.id;
      const materialid = this.materialid && this.currentNodekey;
      const params = {
        name: this.name,
        idCard: this.idCard, //身份证号
        materialid: materialid, //点击的目录ID
      };
      clickMaterial(params).then((result) => {
        if (result.code === 0) {
          this.imageData = result.data.res_data;
          this.imageData.forEach((item, i) => {
            const paramsNew = {
              name: this.name,
              idCard: this.idCard, //身份证号
              fileName: item.fileName, //文件名
            };
            getImgFromCacheByFlag(paramsNew).then((result) => {
              if (result.code === 0) {
                this.$set(item, "description", result.data.res_data);
              }
            });
          });
          this.selectImage(0); // 默认展示第一张图片
        }
      });
    },
    // 获取base64图片
    selectImage(index) {
      this.selectedImageIndex = index;
      this.selectedImageData = this.imageData[index];
    },
    
  },
};
</script>
  
  <style scoped>
>>> .el-menu-item {
  margin-top: 5px;
}
.left {
  float: left;
  margin-left: 22.625vw;
  background: #f7f2ec;
  width: 18.417vw;
  height: 100%;
  margin-top: 30px;
  overflow-y: scroll;
}
.right {
  float: left;
  margin-left: 15px;
  background: #f7f2ec;
  margin-top: 30px;
}
.thumbnail {
  width: 8.813vw;
  overflow-y: scroll;
  float: left;
  margin-left: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
  background: #fff;
}
.bigPicture {
  float: left;
  width: 500px;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 10px;
  background: #fff;
}
>>> .el-tree-node__content {
  height: 60px;
}

/* background-color: #CFE5FC; */
</style>